Päivämäärävalitsimen saavutettavuus: Inklusiivisten kalenterikomponenttien rakentaminen

Oikein:

            
<table>
  <caption>Lokakuun 2024 kalenteri</caption>
  <thead>
    <tr>
      <th scope="col">Su</th>
      <th scope="col">Ma</th>
      <th scope="col">Ti</th>
      <th scope="col">Ke</th>
      <th scope="col">To</th>
      <th scope="col">Pe</th>
      <th scope="col">La</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

            

              
                Copy
              
            
          

2. ARIA-attribuutit

ARIA (Accessible Rich Internet Applications) -attribuutit tarjoavat lisäsemanttista tietoa avustaville teknologioille, mikä parantaa niiden ymmärrystä interaktiivisista elementeistä. Käytä ARIA-attribuutteja seuraaviin:

• Määrittele rooleja: Ilmoita elementtien tarkoitus, kuten `role="grid"` kalenteriruudukolle ja `role="gridcell"` kullekin päivämääräsolulle.
• Tarjoa otsikoita: Käytä `aria-label` tai `aria-labelledby` tarjotaksesi kuvaavia otsikoita elementeille, erityisesti silloin, kun visuaalinen otsikko ei riitä.
• Ilmoita tila: Käytä attribuutteja, kuten `aria-selected` ilmaisemaan valitun päivämäärän ja `aria-disabled` ilmaisemaan poistettuja päivämääriä.
• Tarjoa kuvauksia: Käytä `aria-describedby` liittääksesi lisätietoja elementtiin, kuten päivämäärämuodon kuvauksen.

Esimerkki:

            
<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Valitse päivämäärä</caption>
  <thead>
    <tr>
      <th scope="col">Su</th>
      <th scope="col">Ma</th>
      <th scope="col">Ti</th>
      <th scope="col">Ke</th>
      <th scope="col">To</th>
      <th scope="col">Pe</th>
      <th scope="col">La</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="Lokakuu 1, 2024">1</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 2, 2024">2</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 3, 2024">3</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 4, 2024">4</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 5, 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="Lokakuu 6, 2024">6</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 7, 2024">7</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 8, 2024">8</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 9, 2024">9</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 10, 2024">10</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 11, 2024">11</button></td>
      <td role="gridcell"><button aria-label="Lokakuu 12, 2024">12</button></td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

            

              
                Copy
              
            
          

Huomautus: Testaa aina oikeilla ruudunlukijoilla varmistaaksesi, että ARIA-attribuutit tulkitaan oikein.

3. Näppäimistönavigointi

Näppäimistönavigointi on välttämätöntä käyttäjille, jotka eivät voi käyttää hiirtä tai muuta osoitinlaitetta. Varmista, että kaikki päivämäärävalitsimen interaktiiviset elementit ovat käytettävissä näppäimistön kautta.

• Kohdistuksen hallinta: Käytä `tabindex`-attribuuttia kohdistusjärjestyksen hallintaan. Varmista, että kohdistus siirtyy loogisesti päivämäärävalitsimen läpi. Käytä JavaScriptiä kohdistuksen hallintaan, kun käyttäjä on vuorovaikutuksessa widgetin kanssa.
• Nuolinäppäimet: Ota käyttöön näppäimistönavigointi nuolinäppäimillä siirtyäksesi päivämäärien välillä. Vasen ja oikea nuolinäppäin siirtävät vastaavasti edelliseen ja seuraavaan päivään. Ylös- ja alasnuolinäppäimet siirtävät vastaavasti saman päivän edelliseen ja seuraavaan viikkoon.
• Home- ja End-näppäimet: Home-näppäin siirtää kuluvan viikon ensimmäiseen päivään ja End-näppäin siirtää kuluvan viikon viimeiseen päivään.
• Page Up- ja Page Down -näppäimet: Page Up -näppäin siirtää edelliseen kuukauteen ja Page Down -näppäin siirtää seuraavaan kuukauteen.
• Enter-näppäin: Enter-näppäimen tulee valita kohdistettu päivämäärä.
• Escape-näppäin: Escape-näppäimen tulee sulkea päivämäärävalitsin ja palauttaa kohdistus syöttökenttään tai painikkeeseen, joka käynnisti sen.

Esimerkki (JavaScript):

            
// Esimerkki näppäimistönavigoinnin käsittelystä
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Siirrä kohdistus edelliseen päivään
      break;
    case 'ArrowRight':
      // Siirrä kohdistus seuraavaan päivään
      break;
    case 'ArrowUp':
      // Siirrä kohdistus samaan päivään edellisellä viikolla
      break;
    case 'ArrowDown':
      // Siirrä kohdistus samaan päivään seuraavalla viikolla
      break;
    case 'Enter':
      // Valitse kohdistettu päivämäärä
      break;
    case 'Escape':
      // Sulje päivämäärävalitsin
      break;
  }
});

            

              
                Copy
              
            
          

4. Ruudunlukijoiden yhteensopivuus

Ruudunlukijat luottavat semanttiseen HTML:ään ja ARIA-attribuutteihin tarjotakseen tietoa käyttäjille. Varmista, että päivämäärävalitsimesi on yhteensopiva suosittujen ruudunlukijoiden, kuten NVDA, JAWS ja VoiceOver, kanssa.

• Kuvaavat otsikot: Tarjoa selkeät ja ytimekkäät otsikot kaikille interaktiivisille elementeille. Käytä `aria-label` tai `aria-labelledby` tarjotaksesi lisäyhteyttä.
• Tilailmoitukset: Käytä ARIA-attribuutteja ilmaisemaan elementtien tila, kuten `aria-selected` valitulle päivämäärälle ja `aria-disabled` poistetuille päivämäärille. Ruudunlukijat ilmoittavat nämä tilat käyttäjälle.
• Live-alueet: Käytä ARIA-live-alueita (esim. `aria-live="polite"`) ilmoittaaksesi dynaamiset muutokset päivämäärävalitsimessa, kuten kun käyttäjä siirtyy eri kuukauteen. Tämän avulla ruudunlukijat voivat ilmoittaa käyttäjälle muutoksesta keskeyttämättä heidän työnkulkuaan.
• Virheiden käsittely: Jos on virheitä tai validointiongelmia, tarjoa selkeitä ja informatiivisia virheilmoituksia, jotka ovat ruudunlukijoiden käytettävissä. Käytä `aria-describedby` liittääksesi virheilmoituksen asiaankuuluvaan syöttökenttään.

Esimerkki:

            
<div aria-live="polite">
  <!-- Dynaaminen sisältö, kuten kuukauden navigointi -->
</div>

            

              
                Copy
              
            
          

5. Visuaalinen suunnittelu

Päivämäärävalitsimen visuaalisen suunnittelun tulee myös olla saavutettava. Harkitse seuraavia asioita:

• Värikontrasti: Varmista riittävä värikontrasti tekstin ja taustavärien välillä WCAG (Web Content Accessibility Guidelines) 2.1 Level AA -standardien täyttämiseksi. Käytä värikontrastin tarkistustyökalua kontrastisuhteen vahvistamiseen.
• Kohdistusindikaattorit: Tarjoa selkeä ja näkyvä kohdistusindikaattori kaikille interaktiivisille elementeille. Kohdistusindikaattorin tulee olla erillinen ympäröivistä elementeistä, eikä sitä saa peittää muut elementit.
• Fonttikoko ja väli: Käytä luettavaa fonttikokoa ja riittävää väliä elementtien välillä luettavuuden ja käytettävyyden parantamiseksi.
• Vältä luottamasta pelkästään väriin: Älä luota pelkästään väriin tiedon välittämiseksi. Käytä muita visuaalisia vihjeitä, kuten kuvakkeita tai tekstiä, täydentämään värikoodausta.

6. Lokalisointi ja kansainvälistäminen

• Päivämäärämuodot: Käytä joustavaa päivämäärämuotoilukirjastoa, joka tukee eri päivämäärämuotoja, kuten PP/KK/VVVV (yleinen Euroopassa ja osissa Aasiaa) ja KK/PP/VVVV (yleinen Pohjois-Amerikassa). Anna käyttäjien mukauttaa päivämäärämuodon omien mieltymystensä mukaan.
• Kalenterijärjestelmät: Tue eri kalenterijärjestelmiä, kuten gregoriaanista kalenteria (yleisimmin käytetty kalenteri) ja hijri-kalenteria (käytetään monissa islamilaisissa maissa).
• Kielituki: Tarjoa käännöksiä kaikille tekstielementeille päivämäärävalitsimessa, mukaan lukien kuukausien nimet, päivien nimet ja otsikot.
• Oikealta vasemmalle (RTL) -tuki: Varmista, että päivämäärävalitsin näkyy oikein RTL-kielillä, kuten arabiaksi ja hepreaksi. Tämä voi edellyttää widgetin asettelun ja tyylin säätämistä.
• Aikavyöhykkeet: Ota huomioon aikavyöhykkeiden vaikutukset päivämäärien käsittelyssä. Tallenna päivämäärät yhdenmukaisella aikavyöhykkeellä (esim. UTC) ja muunna ne käyttäjän paikalliseen aikavyöhykkeeseen, kun ne näytetään.

Esimerkki: Käytä JavaScript-kirjastoa, kuten `moment.js` tai `date-fns`, päivämäärämuotoilun ja lokalisoinnin käsittelyyn.

7. Mobiilisaavutettavuus

• Kosketuskohteet: Varmista, että kaikilla interaktiivisilla elementeillä on riittävän suuret kosketuskohteet, jotta niitä on helppo napauttaa mobiililaitteilla. Apple suosittelee vähintään 44x44 pikselin kosketuskoon kokoa.
• Responsiivinen suunnittelu: Käytä responsiivisia suunnittelutekniikoita varmistaaksesi, että päivämäärävalitsin mukautuu eri näyttökokoihin ja suuntiin.
• Näppäimistösyöttö: Jos päivämäärävalitsin edellyttää näppäimistösyöttöä, tarjoa mobiiliystävällinen näppäimistö, joka on optimoitu päivämäärän syöttämiseen.
• Eleet: Vältä luottamasta pelkästään eleisiin, jotka voivat olla vaikeita motoristen haasteiden omaaville käyttäjille. Tarjoa vaihtoehtoisia syöttötapoja, kuten näppäimistönavigointi tai ääniohjaus.

Testaus ja validointi

Perusteellinen testaus on ratkaisevan tärkeää päivämäärävalitsimesi saavutettavuuden varmistamiseksi. Käytä sekä automaattisia että manuaalisia testausmenetelmiä:

• Automaattinen testaus: Käytä saavutettavuuden testausvälineitä, kuten Axe tai WAVE, tunnistaaksesi yleiset saavutettavuusongelmat.
• Manuaalinen testaus: Testaa päivämäärävalitsin manuaalisesti ruudunlukijalla ja näppäimistönavigoinnilla varmistaaksesi, että se on vammaisten ihmisten käytettävissä.
• Käyttäjätestaus: Suorita käyttäjätestaus vammaisten ihmisten kanssa kerätäksesi palautetta ja tunnistaaksesi kehityskohteita.
• WCAG-vaatimustenmukaisuus: Varmista, että päivämäärävalitsimesi täyttää WCAG 2.1 Level AA -vaatimukset.

Esimerkkejä saavutettavista päivämäärävalitsimista

Useat avoimen lähdekoodin ja kaupalliset päivämäärävalitsinkirjastot tarjoavat hyvän saavutettavuustuen. Joitakin esimerkkejä ovat:

• React Datepicker: Suosittu React-komponentti, jossa on ARIA-tuki ja näppäimistönavigointi.
• Air Datepicker: Kevyt ja mukautettava päivämäärävalitsin, jossa on hyvät saavutettavuusominaisuudet.
• FullCalendar: Täysimittainen kalenterikomponentti, jossa on kattava saavutettavuustuki.

Kun valitset päivämäärävalitsinkirjastoa, arvioi huolellisesti sen saavutettavuusominaisuuksia ja varmista, että se täyttää erityisvaatimuksesi.

Parhaat käytännöt saavutettavien päivämäärävalitsimien rakentamiseen

• Käytä semanttista HTML: ää päivämäärävalitsimen rakentamiseen.
• Käytä ARIA-attribuutteja lisätietojen tarjoamiseen.
• Varmista, että näppäimistönavigointi on täysin toteutettu.
• Testaa ruudunlukijoiden kanssa yhteensopivuuden varmistamiseksi.
• Tarjoa riittävä värikontrasti ja selkeät kohdistusindikaattorit.
• Lokalisoi ja kansainvälistä päivämäärävalitsin maailmanlaajuisille käyttäjille.
• Optimoi päivämäärävalitsin mobiililaitteille.
• Suorita perusteellinen testaus ja validointi.

Johtopäätös

Saavutettavien päivämäärävalitsimien rakentaminen on monimutkainen, mutta olennainen tehtävä. Noudattamalla tässä oppaassa esitettyjä ohjeita ja parhaita käytäntöjä voit luoda inklusiivisia kalenterikomponentteja, jotka palvelevat kaikkien kykyjen omaavia käyttäjiä monipuolisissa kulttuuri- ja teknologiaympäristöissä. Muista, että saavutettavuus on jatkuva prosessi, ja jatkuva testaus ja parantaminen ovat ratkaisevan tärkeitä sen varmistamiseksi, että päivämäärävalitsimesi pysyvät saavutettavissa ajan mittaan. Priorisoimalla saavutettavuuden voit luoda inklusiivisemman ja käyttäjäystävällisemmän verkkokokemuksen kaikille.

Lisämateriaalia

• WAI-ARIA Authoring Practices Guide (APG) - Calendar
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University